<template>
	<view class="m-text "  :class="[className]"  :style="[textStyle]" @click="clickHandle">
		<m-icon v-if="icon" :type="icon" spa="0 15 0 0" :wh="iconSize" :color="iconColor"></m-icon>
		{{text}}
		<slot></slot>
	</view>
</template>

<script>
	import mixin from "../../libs/mixin/mixin.js"
	export default {
		name: "m-text",
		mixins: [mixin],
		data() {
			return {

			};
		},
		props: {
			//小程序适用props传参方式
			text: {
				type: [String, Number],
				default: '',
			},
			display: {
				type: String,
				default: 'inline-block',
			},
			block: {
				type: Boolean,
				default: false,
			},
			bold: {
				type: Boolean,
				default: false,
			},
			//左侧图标
			icon: {
				type: String,
				default: ''
			},
			iconSize: {
				type: String,
				default: '26'
			},
			iconColor: {
				type: String,
				default: ''
			},
			decoration: {
				type: String,
				default: ''
			},
		},
		computed: {
			textStyle() {
				return {
					...this.style,
					'fontWeight': this.bold ? 'bold' : (this.weight || '500'),
					'color': this.color,
					'display': this.icon ? (this.block ? 'flex' : 'inline-flex') : (this.block ? 'block' : this.display),
					'text-decoration':this.decoration
				}
			},
		},
		mounted() {
		},
	}
</script>

<style lang="scss">
	.m-text {
		align-items: center;
	}
</style>